<template>
  <div class="net-dhcp relative">
    <page-loading></page-loading>
    <div class="form-wrap mb10">
      <template v-for="(item, idx) in form">
        <os-switch v-if="idx==0" :item="item" v-model="dhcp_state[idx]" :key="idx">
          <template #slot-switch>
            <div class="tip" :style="{'margin-left': $store.state.user.isMobile ? '0' : '30px' }">
              {{item.tip}}
            </div>
          </template>
        </os-switch>
        <os-input v-if="idx>0&&idx<3" :item="item" v-model="dhcp_state[idx]"
        :key="idx" :width="$store.state.user.isMobile ? '100px' : '180px'">
          <template #input-prefix>
            <div style="font-size: 16px; margin-right: 16px; color: #222831;">
              {{prefix}}
            </div>
          </template>
        </os-input>
        <os-entry v-if="idx==3" :item="item">
          <input class="input-none bottom-line text-center" style="width: 100px; margin-right: 10px;" v-model="dhcp_state[3]">
          <el-select class="select-mini" v-model="dhcp_state[4]" :popper-append-to-body="false">
            <el-option v-for="(item, idx) in time_options"
            :key="idx"
            :label="item.label"
            :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="tip" v-if="!$store.state.user.isMobile">{{item.tip}}</div>
        </os-entry>
        <div class="field-tip" v-if="$store.state.user.isMobile && idx==3">
          <span class="tip">{{item.tip}}</span>
        </div>
      </template>
      <div class="value alone-right">
        <div class="btn btn-blue" @click="set_dhcp_config">{{$t("btn.save")}}</div>
      </div>
    </div>
    <div class="view-table mb20">
      <div class="table-title">
        {{info1.title}}:
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w150">
          <col class="w70">
          <col class="w80">
          <col class="w70">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info1.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idx) in dhcp_allocation" :key="idx">
            <td>{{item.dhcp_host ? item.dhcp_host : "--"}}</td>
            <td>{{item.dhcp_ip}}</td>
            <td>{{item.dhcp_mac.toUpperCase()}}</td>
            <td>{{formatDuration(item.dhcp_remain_lease)}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="view-table mb20" v-if="false">
      <div class="table-title">
        {{info2.title}}:
      </div>
      <div class="operate mb10">
        <!-- 批量添加 -->
        <div class="btn btn-blue" @click="show_batch=true">{{info2.operate[0]}}</div>
        <div class="btn btn-blue">{{info2.operate[1]}}</div>
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w30">
          <col class="w150">
          <col class="w70">
          <col class="w80">
          <col class="w70">
        </colgroup>
        <thead>
          <tr>
            <th><input type="checkbox"></th>
            <th v-for="(item, idx) in info2.head" v-if="idx!=0" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td v-for="n in 3">
              <input type="text" class="input-none bottom-line text-center input-cell" />
             </td>
             <td><span class="add">{{info2.add}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- <div class="toolbar">{{$t('network.dhcp.toolbar')}}</div> -->
    <os-alertx type="large" :title="title" v-model="show_batch">
      <ul class="area-wrap">
        <li class="vertical-align-flex" v-for="(item, idx) in area_list" :key='idx'>
          <div class="area-left border-tl">{{item}}：</div>
          <div class="area-right border-tl">
            <textarea v-model="batch_value[idx]" class="text-area"></textarea>
            <span class="tip" style="line-height: 1.2;">{{tips[idx]}}</span>
          </div>
        </li>
      </ul>
      <div class="btn-wrap">
        <div class="btn btn-gray" @click="batch_confirm">{{$t('btn.confirm')}}</div>
        <div class="btn btn-gray" @click="batch_cancel">{{$t('btn.cancel')}}</div>
      </div>
    </os-alertx>
    <!-- <os-alertx type="confirm" msg="你确定要进行操作吗？" v-model="show_confirm"></os-alertx> -->
  </div>
</template>

<script>

  export default {
    data(){
      return {
        prefix: '',
        dhcp_config: {},
        flag: false,
        dhcp_state: ["", "", "", "", ""],
        // 控制批量添加对话框显示隐藏
        show_batch: false,
        title: this.$t('network.dhcp.batch.title'),
        area_list: this.$t('network.dhcp.batch.list'),
        // 双向绑定批量batch添加的值
        batch_value: ['', '', ''],
        tips: this.$t('network.dhcp.batch.tips'),
        // show_confirm: true,
        dhcp_allocation: [],
        timer: null,
      }
    },
    computed: {
      form(){
        return this.$t('network.dhcp.form')
      },
      time_options(){
        return this.$t('network.dhcp.time_options')
      },
      info1(){
        return this.$t('network.dhcp.info1')
      },
      info2(){
        return this.$t('network.dhcp.info2')
      },
      enable(){
        // flag数据变动驱动视图更新
        this.flag;
        this.dhcp_state[0];
        return this.dhcp_state[0] != '0'
      },
      // dhcp_state(){
      //   let data = ["", "", "", "", ""]
      //   let config = this.dhcp_config
      //   data[0] = config.dhcp_enabled
      //   data[1] = config.dhcp_start
      //   data[2] = config.dhcp_end
      //   return data
      // }
    },
    methods:{
      get_dhcp_config(){
        this.$req.get('/webapi?op=get_dhcp_config').then(res=> {
          // this.dhcp_config = res.data
          console.log(res.data)
          this.prefix = res.data.dhcp_head
          this.obj_to_arr(res.data,['dhcp_enabled', 'dhcp_start', 'dhcp_end'], this.dhcp_state)
          // this.$set(this.dhcp_state, 0, this.dhcp_state[0] == '1' ? 'disenable' : 'enable')
          let seconds = parseInt(res.data.dhcp_lease)
          let h = Math.floor(seconds / 3600)
          let m = Math.floor((seconds / 60) % 60)
          if(h>0){
            this.$set(this.dhcp_state, 3, h)
            this.$set(this.dhcp_state, 4, 'h')
          } else {
            this.$set(this.dhcp_state, 3, m)
            this.$set(this.dhcp_state, 4, 'm')
          }
          console.log(this.dhcp_state)
        })
      },
      get_dhcp_allocation(){
        this.$req.get("/webapi?op=get_dhcp_allocation").then(res => {
          // console.log(res.data)
          let { data, } = res
          this.dhcp_allocation = data
          // console.log(this.dhcp_allocation)
        })
      },
      switch_dhcp(){
        let value = this.dhcp_state[0]=="0" ? "1" : "0"
        this.$set(this.dhcp_state, 0, value)
        console.log(this.enable, this.dhcp_state[0])
      },
      set_dhcp_config(){
        let dhcp_lease;
        if(this.dhcp_state[4] == 'h'){
          dhcp_lease = parseInt(this.dhcp_state[3]) * 3600
        } else {
          dhcp_lease = parseInt(this.dhcp_state[3]) * 60
        }
        let params = {
          dhcp_enabled: this.dhcp_state[0],
          dhcp_start: this.dhcp_state[1],
          dhcp_end: this.dhcp_state[2],
          dhcp_lease: dhcp_lease + '',
        }
        this.proxy_req("get", "/webapi?op=set_dhcp_config", params, res=> {
          if(res.code != "1"){
            return
          }
          this.get_dhcp_config()
        }, true, this.$t("network.dhcp.resultMap"))
      },
      batch_confirm(){
        // 渲染数据 this.batch_value 到列表
      },
      batch_cancel(){
        this.show_batch = false;
        // 清除数据
      }
    },
    created(){
      this.$bus.emit('changeTab', 3)
      this.get_dhcp_config()
      this.get_dhcp_allocation()
      this.timer = setInterval(()=> {
        this.get_dhcp_allocation()
      }, 3000)
    },
    activated() {
      this.timer = setInterval(()=> {
        this.get_dhcp_allocation()
      }, 3000)
    },
    deactivated(){
      clearInterval(this.timer)
      this.timer = null
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
</script>

<style lang="scss" scoped>
  .area-wrap{
    flex: 1 0 100%;
    border-right: 1px solid #cdcdcd;
    border-bottom: 1px solid #cdcdcd;
    li{
      align-items: stretch;
    }
    .border-tl{
      border-top: 1px solid #cdcdcd;
      border-left: 1px solid #cdcdcd;
    }
    .area-left{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 10px;
      background-color: #f1f1f1;
    }
    .area-right {
      flex: 3;
      padding: 10px;
      textarea {
        float: left;
        width: 100%;
        height: 80px;
      }
    }
  }
  .btn-wrap{
    flex: 1;
    padding-top: 10px;
    text-align: center;
  }
  @media screen and (max-width: 800px) {
  	.bottom-line{
  		width: 85px;
  	}
  	.field-tip{
  		line-height: 2;
  	}
    // 小屏不显示批量操作按钮
    .operate{
      display: none;
    }
  }
</style>
